<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改属性</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: absolute;
            height: 100%;
            width: 100%;
            overflow: hidden;
        }

        .nav {
            float: left;
            width: 275px;
            border-right: 1px solid;
            height: 50%;
        }

        .content {
            margin-left: 275px;
            height: 50%;
        }

        .controller {
            position: fixed;
            width: 275px;
            height: 120px;
            background-color: yellowgreen;
            border: 1px solid #ddd;
            text-align: center;
            z-index: 99;
            top: 50%;
        }

        .save, .outPut {
            padding: 8px 12px;
            background-color: #fff;
            border: 1px solid #ddd;

        }
    </style>
</head>
<body onload="init()">
<div class="container">
    <div class="nav" id="Palette"></div>
    <div class="content" id="Diagram"></div>
</div>
<div class="controller">
    <button class="save" onclick="save()">保存</button>
    <button class="outPut" onclick="makeSvg()">导出svg</button>
    <div id="Inspector"></div>
</div>

<script src="release/go.js"></script>
<script src="release/DataInspector.js"></script>
<script>

    function init() {
        if (window.goSamples) goSamples();
        $ = go.GraphObject.make;
        Diagram = $(go.Diagram, "Diagram", {
            "animationManager.duration": 800,
            "undoManager.isEnabled": true, // enable undo & redo
            "grid.visible": true,//绘制网格
            initialContentAlignment: go.Spot.Center,//默认居中排列
            allowDrop: true,  // must be true to accept drops from the Palette
        })

//坐标点的定位
        function nodeStyle() {
            return [
                new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
            ]
        }

        //创建连接点


        function creatPonit(name, spot, output, input) {
            return $(go.Shape, "Circle",
                {
//                    fill: "transparent",
                    fill: "red",
                    stroke: null,  // this is changed to "white" in the showPorts function
                    desiredSize: new go.Size(8, 8),
                    alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
                    portId: name,  // declare this object to be a "port"
                    fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
                    fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
                    cursor: "pointer"  // show a different cursor to indicate potential link point
                });
        }

        //加入模板

        Diagram.nodeTemplateMap.add("",  // the default category
            $(go.Node, "Spot", nodeStyle(),
                // the main object is a Panel that surrounds a TextBlock with a rectangular Shape
                $(go.Panel, "Auto",
                    $(go.Shape, "Rectangle",
                        {fill: "#00A9C9", stroke: null},
                        new go.Binding("figure", "figure")),
                    $(go.TextBlock,
                        {
                            font: "bold 11pt Helvetica, Arial, sans-serif",
                            stroke: "#000",
                            margin: 8,
                            maxSize: new go.Size(160, NaN),
                            wrap: go.TextBlock.WrapFit,
                            editable: true
                        },
                        new go.Binding("text").makeTwoWay())
                ),
                creatPonit("T", go.Spot.Top, true, true)
            ));
        //数据
        var model = $(go.TreeModel)
        model.nodeDataArray = [
            {category: "Start", text: "Start"},
            {text: "Step"},
            {text: "???", figure: ""},
            {category: "End", text: "End"},
            {category: "", text: "Comment"}
        ]
        load()

        //模型工具栏
        Palette = $(go.Palette, "Palette", {
            "animationManager.duration": 800,
            "undoManager.isEnabled": true, // enable undo & redo
            nodeTemplateMap: Diagram.nodeTemplateMap,
            initialContentAlignment: go.Spot.Center,//默认居中排列
            allowDrop: true,  // must be true to accept drops from the Palette
        })
        Palette.model = model;


        (function () {
            var inspector = new Inspector('Inspector', Diagram,
                {
                    properties: {
                        "fill": {show: Inspector.showIfPresent, type: 'color'},
                        "stroke": {show: Inspector.showIfPresent, type: 'color'},
                        "color": {show: Inspector.showIfPresent, type: 'color'}
                    }
                });
        })()

    }


    function save() {//将内容区的所有模型数据导出保存
        var jsonNodes = Diagram.model.toJson();
        console.log(jsonNodes)
    }
    function makeSvg() {
        var svg = Diagram.makeSvg({
//          scale: 0.5
        });
        window.open(svg)

    }
    var nodeJson = {
        "class": "go.GraphLinksModel",
        "nodeDataArray": [
            {"category": "", "text": "内容", "key": -5, "loc": "-497.0000000000001 -196.99999999999991"},
            {"text": "开始", "figure": "", "key": -3, "loc": "-797 -197.00000000000006"},
            {"text": "开始", "key": -2, "loc": "-795.9999999999999 3.9999999999999964"},
            {"category": "End", "text": "完结", "key": -4, "loc": "-196.00000000000028 3"},
            {"category": "Start", "text": "结束", "key": -1, "loc": "-196.9999999999996 -196"}
        ],
        "linkDataArray": [
            {"from": -2, "to": -3},
            {"from": -5, "to": -1},
            {"from": -5, "to": -3},
            {"from": -1, "to": -4}
        ]
    }


    function load() {
        Diagram.model = go.Model.fromJson(nodeJson)
    }

</script>
</body>
</html>